<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="pushOrderBoxDetailListForm">
        <el-row style="flex-wrap: wrap;" :gutter="10">
          <el-form-item label="入库时间">
            <el-date-picker v-model="pushOrderBoxDetailListForm.pushTime" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="">
            <el-input v-model="pushOrderBoxDetailListForm.pushOrderDetailCode"  placeholder="请输入入库详情编号">
            </el-input>
          </el-form-item>

          <el-form-item label="">
            <el-input v-model="pushOrderBoxDetailListForm.productName"  placeholder="请输入物料名称">
            </el-input>
          </el-form-item>

          <el-form-item label="">
            <el-input v-model="pushOrderBoxDetailListForm.productCode"  placeholder="请输入物料编号">
            </el-input>
          </el-form-item>

          <el-form-item label="">
            <el-input v-model="pushOrderBoxDetailListForm.boxDetailStatus"  placeholder="请输入入库状态">
            </el-input>
          </el-form-item>
          <el-form-item label="">

            <el-button class="searchbtn" @click="searchPushBoxDetail" type="primary" icon="el-icon-search">搜索</el-button>
            <el-button @click="exportExcel" type="primary">导出</el-button>
          </el-form-item>
        </el-row>

      </el-form>

      <el-table :data="pushOrderBoxDetailList" id="out-table" border>
        <el-table-column label="入库详情编号" prop="pushOrderDetailCode" min-width="180"></el-table-column>
        <el-table-column label="入库明细编号" prop="boxDetailCode" min-width="220"></el-table-column>
        <el-table-column label="物品名称" prop="productName" min-width="100"></el-table-column>
        <el-table-column label="物品编号" prop="productCode" min-width="100"></el-table-column>
        <el-table-column label="货架名称" prop="shelveName" min-width="50"></el-table-column>
        <el-table-column label="货架行" prop="shelveHeight" min-width="80"></el-table-column>
        <el-table-column label="货架列" prop="shelveWidth" min-width="80"></el-table-column>
        <el-table-column label="数量" prop="unintCount" min-width="80"></el-table-column>
        <el-table-column label="入库状态" prop="boxDetailStatus" min-width="80"></el-table-column>
        <el-table-column label="入库时间" prop="pushTime" min-width="200"></el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pushOrderBoxDetailListForm.pageNum"
        :page-sizes="[10, 20, 30, 40]" :page-size="pushOrderBoxDetailListForm.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </el-card>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
    name: 'PushBoxDetailReport',
    data() {
      return {
        pushOrderBoxDetailList: [],
        total: 0,
        pushOrderBoxDetailListForm: {
          pageNum: 1,
          pageSize: 10,
          pushOrderDetailCode: '',
          productCode: '',
          productName: '',
          boxDetailStatus: '',
          pushTime: []
        }
      }
    },
    methods: {

      async pushBoxDetailReport() {
        console.log('mymethods')
        const res = await this.$apiUtil.postByJson('warehouseReport/pushBoxDetailReport', this.pushOrderBoxDetailListForm)
        console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.pushOrderBoxDetailList = res.data.pushOrderBoxDetailVOS
        this.total = res.data.totalSize
      },
      async searchPushBoxDetail() {
        if (this.pushTime === '') {
        this.pushOrderBoxDetailListForm.pushTime = null
        } else {
          this.pushOrderBoxDetailListForm.pushTime = this.pushTime
        }
        console.log(this.pushOrderBoxDetailListForm)
        const res = await this.$apiUtil.postByJson('warehouseReport/pushBoxDetailReport', this.pushOrderBoxDetailListForm)
        console.log(res)
        this.pushOrderBoxDetailList = res.data.pushOrderBoxDetailVOS
        this.total = res.data.totalSize
      },
      handleSizeChange (newSize) {
        this.pushOrderBoxDetailListForm.pageSize = newSize
        this.pushBoxDetailReport()
      },
      handleCurrentChange (newPage) {
        this.pushOrderBoxDetailListForm.pageNum = newPage
        this.pushBoxDetailReport()
      },
      // 定义导出Excel表格事件
      exportExcel() {
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
      })
      try {
          FileSaver.saveAs(
          // Blob 对象表示一个不可变、原始数据的类文件对象。
          // Blob 表示的不一定是JavaScript原生格式的数据。
          // File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: 'application/octet-stream' }),
          // 设置导出文件名称
          '入库明细.xlsx'
          )
      } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
      }

    },

    created() {
      console.log('created')
      this.pushBoxDetailReport()
    }

}
</script>

<style scoped>

</style>
